<template>
  <!-- 存货明细 -->
  <div class="inventory-details">
    <c-title :text="name"></c-title>
    <d-list :loading="loading" :finished="finished" @load="onLoad">
      <div class="detail-box" v-for="(item,index) in listData" :key="index">
        <div class="top-title">
          <span class="top-name">{{item.change_name}}</span>
          <span :class="(item.nums + '').indexOf('-') == -1 ? 'add-top-num' : 'reduce-top-num'">{{item.nums}}</span>
        </div>
        <div class="middle-row">
          <div class="date">{{item.created_at}}</div>
          <span class="order-rol" v-if="item.take_order_sn">提货订单：{{item.take_order_sn}}</span>
        </div>
        <div class="goods-box">
          <div class="order-sn">{{item.order_sn}}</div>
          <div class="goods-detail">
            <img :src="item.thumb" alt="" />
            <span class="name">{{item.title}}</span>
          </div>
        </div>
      </div>
    </d-list>
  </div>
</template>

<script>
import inventoryDetails_controller from "./inventoryDetails_controller";

export default inventoryDetails_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.inventory-details {
  margin: 0 0.63rem;

  .detail-box {
    margin-top: 0.63rem;
    padding: 0.88rem 0.63rem 0.63rem 0.63rem;
    background: #fff;
    border-radius: 0.31rem;

    .top-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .top-name {
        font-size: 0.81rem;
        font-weight: 400;
        color: #242424;
      }

      .add-top-num {
        font-size: 0.81rem;
        font-weight: 400;
        color: #f51d1d;
      }

      .reduce-top-num {
        font-size: 0.81rem;
        font-weight: 400;
        color: #41a80e;
      }
    }

    .middle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.63rem 0;

      .date {
        font-size: 0.63rem;
        font-weight: 400;
        color: #807e7e;
      }

      .order-rol {
        font-size: 0.63rem;
        font-weight: 400;
        color: #807e7e;
      }
    }

    .goods-box {
      border-top: 0.05rem solid #ececec;

      .order-sn {
        font-size: 0.63rem;
        font-weight: 400;
        color: #666;
        padding: 0.78rem 0 0.72rem 0;
        text-align: left;
      }

      .goods-detail {
        display: flex;

        img {
          width: 2.8rem;
          height: 2.8rem;
          margin: 0 !important;
          border-radius: 0.15rem;
        }

        .name {
          line-height: 1.1;
          margin-left: 0.66rem;
          font-size: 0.81rem;
          font-weight: 400;
          color: #242424;
          text-align: left;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          height: 90%;
        }
      }
    }
  }
}
</style>
